<!--
  * 商品明细
  *
-->
<template>
  <div>
    <a-table :dataSource="tableData" :columns="columns" :pagination="false" rowKey="id" size="small" bordered>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.dataIndex === 'img'">
          <div class="smart-table-operate">
            <a-image :width="record?.goods?.img ? 30 : 50" :src="record?.goods?.img || failImg" :fallback="failImg" />
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button @click="historyData(record)" type="link" v-privilege="'goods:update'">历史</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <!-- 历史 -->
    <WithdrawalHistoryModal ref="historyModal" />
  </div>
</template>
<script setup lang="ts">
import _ from 'lodash'
import WithdrawalHistoryModal from './withdrawal-history-modal.vue'
import failImg from '@/assets/images/notice/failImg.png'
const props = defineProps({
  enterpriseId: {
    type: Array,
    default: null
  }
})

const columns = reactive([
  {
    title: '图片',
    dataIndex: 'img',
    width: 80
  },
  {
    title: '商品名称',
    dataIndex: ['goods', 'goods_name'],
    width: 350
  },
  {
    title: '规格条码',
    dataIndex: ['spec', 'barcode']
  },
  {
    title: '规格',
    dataIndex: ['spec', 'spec_name']
  },
  {
    title: '单位',
    dataIndex: ['spec', 'unit_name']
  },
  {
    title: '数量',
    dataIndex: 'quantity'
  },
  {
    title: '采退单价',
    dataIndex: 'purchase_price'
  },
  {
    title: '小计',
    dataIndex: 'purchase_total_price'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  }
  //   {
  //     title: '操作',
  //     dataIndex: 'action',
  //     fixed: 'right'
  //   }
])

const tableData = ref([])
watch(
  () => props.enterpriseId,
  (e) => {
    if (e) {
      tableData.value = e
    }
  },
  { immediate: true }
)

// ----------------------------历史 ----------------------------
const historyModal = ref()

const historyData = (data) => {
  historyModal.value.showDrawer(data)
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.button-style {
  margin: 0 10px;
}
</style>
